/*
 * @Description: 充值
 * @Author: iamsmiling
 * @Date: 2021-06-10 23:18:38
 * @LastEditTime: 2021-06-15 09:27:00
 */
import 'package:credit_business_circle/R/R.dart';
import 'package:credit_business_circle/pages/mine/children/wallet/children/recharge/recharge_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class RechargePage extends GetView<RechargeController> {
  const RechargePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.ffffffff,
      appBar: AppBar(
        title: Text("充值"),
        elevation: .5,
      ),
      body: GetBuilder<RechargeController>(builder: (_) {
        return SingleChildScrollView(
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  margin: EdgeInsets.only(
                      top: R.dimen.dp24,
                      left: R.dimen.dp22,
                      bottom: R.dimen.dp20),
                  child: Text(
                    "充值金额",
                    style: TextStyle(
                        fontSize: R.dimen.sp17,
                        color: R.color.ff333333,
                        fontWeight: FontWeight.w600),
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.only(left: R.dimen.dp20, right: R.dimen.dp20),
                  child: TextFormField(
                    style: TextStyle(
                        fontSize: R.dimen.sp26, fontWeight: FontWeight.w600),
                    decoration: InputDecoration(
                      hintText: "请在此输入金额，金额不得低于10元",
                      prefixIcon: Container(
                        alignment: Alignment.center,
                        child: Text(
                          "￥",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              fontSize: R.dimen.sp26,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      prefixIconConstraints: BoxConstraints(
                          minWidth: R.dimen.dp30,
                          maxWidth: R.dimen.dp30,
                          maxHeight: R.dimen.dp48,
                          minHeight: R.dimen.dp48),
                      suffixIcon: Container(
                        width: R.dimen.dp44,
                        alignment: Alignment.centerRight,
                        child: Text(
                          "单位元",
                          style: TextStyle(
                              fontSize: R.dimen.sp15,
                              fontWeight: FontWeight.w600),
                        ),
                      ),
                      border: UnderlineInputBorder(
                          borderSide:
                              BorderSide(color: R.color.ffaaaaaa, width: .5)),
                      focusedBorder: UnderlineInputBorder(
                          borderSide:
                              BorderSide(color: R.color.ffaaaaaa, width: .5)),
                      enabledBorder: UnderlineInputBorder(
                          borderSide:
                              BorderSide(color: R.color.ffaaaaaa, width: .5)),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.symmetric(
                      vertical: R.dimen.dp22, horizontal: R.dimen.dp20),
                  child: Text.rich(TextSpan(
                      text: "账户可用余额：",
                      style: TextStyle(
                          fontSize: R.dimen.sp14, color: R.color.ff444444),
                      children: [
                        TextSpan(
                            text: "400.00",
                            style: TextStyle(color: R.color.fffca609)),
                        TextSpan(text: "元")
                      ])),
                ),
                Container(
                  decoration: BoxDecoration(color: R.color.fff3f3f3),
                  padding: EdgeInsets.symmetric(
                      horizontal: R.dimen.dp18, vertical: R.dimen.dp24),
                  child: Wrap(
                    spacing: R.dimen.dp13,
                    runSpacing: R.dimen.dp13,
                    children: [
                      for (int o in _.options)
                        GestureDetector(
                          child: Container(
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.circular(R.dimen.sp3),
                                color: _.options[_.currentIndex] == o
                                    ? R.color.ff0fc18e
                                    : R.color.ffffffff),
                            width: (R.dimen.width -
                                    R.dimen.dp13 * 3 -
                                    R.dimen.dp18 * 2) /
                                4.0001,
                            height: (R.dimen.width -
                                    R.dimen.dp13 * 3 -
                                    R.dimen.dp18 * 2) /
                                4.0001 *
                                35 /
                                73,
                            child: Text(
                              "$o",
                              style: TextStyle(
                                  fontSize: R.dimen.sp16,
                                  fontWeight: FontWeight.w600,
                                  color: _.options[_.currentIndex] == o
                                      ? R.color.ffffffff
                                      : R.color.ff444444),
                            ),
                          ),
                        )
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(
                      top: R.dimen.dp32,
                      left: R.dimen.dp18,
                      bottom: R.dimen.dp38),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "选择充值方式",
                        style: TextStyle(
                            color: R.color.ff333333, fontSize: R.dimen.sp17),
                      ),
                      for (RechargeChannel c in RechargeChannel.values)
                        Container(
                          child: Row(
                            children: [
                              Container(
                                margin: EdgeInsets.only(right: R.dimen.dp20),
                                width: R.dimen.dp24,
                                height: R.dimen.dp24,
                                child: Checkbox(
                                  value: _.channel == c,
                                  tristate: true,
                                  side: BorderSide(
                                    color: R.color.ffcccccc,
                                  ),
                                  shape: RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(R.dimen.sp9)),
                                  onChanged: (bool? flag) {
                                    // _.selectReason(flag, item);
                                  },
                                  activeColor: R.color.ff00c28a,
                                ),
                              ),
                              Expanded(
                                child: Container(
                                  decoration: BoxDecoration(
                                      border: Border(
                                          bottom: BorderSide(
                                              width: .5,
                                              color: c ==
                                                      RechargeChannel
                                                          .values.last
                                                  ? R.color.transparent
                                                  : R.color.ffcccccc))),
                                  padding: EdgeInsets.symmetric(
                                      vertical: R.dimen.dp20),
                                  child: Row(
                                    children: [
                                      Image.asset(c.icon),
                                      Container(
                                        margin:
                                            EdgeInsets.only(left: R.dimen.dp16),
                                        child: Text(
                                          c.name,
                                          style: TextStyle(
                                              fontSize: R.dimen.sp16,
                                              color: R.color.ff333333),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                    ],
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(bottom: R.dimen.dp36),
                  margin: EdgeInsets.symmetric(horizontal: R.dimen.dp18),
                  child: ElevatedButton(
                      onPressed: () {},
                      style: ButtonStyle(
                          shape: MaterialStateProperty.all(
                              RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.circular(R.dimen.sp5))),
                          backgroundColor:
                              MaterialStateProperty.all(R.color.ff1bbf8e)),
                      child: Text("立即充值")),
                ),
                Container(
                  color: R.color.fff5f5f5,
                  padding: EdgeInsets.only(
                      top: R.dimen.dp32,
                      left: R.dimen.dp18,
                      right: R.dimen.dp18,
                      bottom: Get.mediaQuery.padding.bottom),
                  child: Text(
                    """充值说明：
1、单笔充值金额不得低于10元；
2、充值金额仅可用于平台消费，不可提现
3、一旦充值成功，无法撤回及提现；
注：您需充分理解知晓并同意以上内容，否则请勿充值，一旦充值视为您已同意并接受上述原则。""",
                    style: TextStyle(
                        height: 1.5,
                        fontSize: R.dimen.sp14,
                        color: R.color.ff444444),
                  ),
                )
              ],
            ),
          ),
        );
      }),
    );
  }
}
